<!--
 @description 弹出层
 @fileName index.vue
 @author zengqiongying
 @created 2022/08/02 15:51:14
-->
<template>
  <van-popup
    v-model="popShow"
    round
    close-on-popstate
    :closeable="closeable"
    :close-on-click-overlay="false"
    :position="position"
    get-container="body"
    :class="['custom-popup',{'center':position==='center'}]"
    v-bind="$attrs"
    v-on="$listeners"
    @close="clickClose"
  >
    <slot name="title">
      <div v-if="showTitle" class="pop-title">{{ title }}</div>
    </slot>

    <div v-if="!!icon" class="pop-icon">
      <img :src="iconUrl">
    </div>
    <slot>
      <div class="pop-content" :style="{'text-align':msgAlign}">
        {{ message }}
      </div>
    </slot>
    <slot name="foot">
      <div v-if="showConfirmButton || showCancelButton" class="pop-foot">
        <van-button v-if="showCancelButton" type="default" class="cus-btn btn-default" @click="clickCancel">{{ cancelButtonText }}</van-button>
        <van-button v-if="showConfirmButton" type="primary" class="cus-btn btn-primary" @click="clickConfirm">{{ confirmButtonText }}</van-button>
      </div>
    </slot>
  </van-popup>
</template>

<script>
import IconError from '@/assets/icon-error.png'
import IconWarning from '@/assets/icon-warning.png'
import IconSuccess from '@/assets/icon-success.png'
export default {
  name: 'CustomPopup',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: 'center'
    },
    closeable: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    }, // 标题
    message: {
      type: String,
      default: ''
    }, // 内容
    msgAlign: {
      type: String,
      default: 'left' // center  left right
    }, // 内容对齐方式
    showTitle: {
      type: Boolean,
      default: true
    }, // 是否展示标题
    showConfirmButton: {
      type: Boolean,
      default: true
    }, // 是否展示确认按钮
    showCancelButton: {
      type: Boolean,
      default: true
    }, // 是否展示取消按钮
    confirmButtonText: {
      type: String,
      default: '确定'
    }, // 确认按钮文案
    cancelButtonText: {
      type: String,
      default: '取消'
    }, // 取消按钮文案
    icon: {
      type: String,
      default: ''
    } // 图标
  },
  data() {
    return {
      IconError,
      IconWarning,
      IconSuccess
    }
  },
  computed: {
    popShow: {
      set(val) {
        this.$emit('input', val)
      },
      get(val) {
        return this.value
      }
    },
    iconUrl() {
      if (this.icon === 'error') {
        return this.IconError
      } else if (this.icon === 'warning') {
        return this.IconWarning
      } else if (this.icon === 'success') {
        return this.IconSuccess
      }
      return this.icon
    }
  },
  methods: {
    clickClose() {
      this.$emit('input', false)
      this.$emit('cancel')
    },
    clickCancel() {
      this.$emit('input', false)
      this.$emit('cancel')
    },
    clickConfirm() {
      this.$emit('confirm')
    }
  }
}

</script>
<style lang='less' scoped>
  .pop-icon{
    width: 57px;
    height: auto;
    margin:0 auto 20px;
    line-height: 0;
    img{
      width: 57px;
      height: auto;
    }
  }
</style>
